<template>
  <div class="table">
    <div class="container">
      <div class="handle-box">
        <el-input
          v-model="select_word"
          size="mini"
          placeholder="筛选关键词"
          class="handle-input mr10"
        ></el-input>
      </div>
      <el-table :data="data" stripe style="width: 100%">
        <el-table-column label="标题" width="350">
          <template slot-scope="scope">
            <router-link
              :to="{
                path: '/Home/SpeTopic',
                query: { data: scope.row.tId },
              }"
              >{{ scope.row.title }}</router-link
            >
          </template>
        </el-table-column>
        <el-table-column prop="nickname" label="版块" width="150">
          <template slot-scope="scope">
            <span>{{
              scope.row.type == 0
                ? "日常"
                : scope.row.type == 1
                ? "知识"
                : scope.row.type == 2
                ? "提问"
                : scope.row.type == 3
                ? "求助"
                : "交友"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="nickname" label="用户" width="150">
          <template slot-scope="scope">
            <a href="">{{
              scope.row.realStatus == 0 ? scope.row.nickname : "匿名用户"
            }}</a>
          </template>
        </el-table-column>
        <el-table-column
          prop="publishTime"
          width="150"
          align="center"
          label="发布时间"
        >
        </el-table-column>
        <el-table-column prop="likes" label="点赞量" align="center">
        </el-table-column>
        <el-table-column prop="collectionTimes" label="收藏量" align="center">
        </el-table-column>
        <el-table-column label="审核状态" align="center">
          <template slot-scope="scope">
            <el-switch
              @change="submitCheck(scope.row.tId, scope.row.checkStatus)"
              v-model="scope.row.checkStatus"
              active-color="#13ce66"
              inactive-color="#dcdfe6"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.tId)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @current-change="handleCurrentChange"
          background
          layout="total, prev, pager, next"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="tableData.length"
        >
          >
        </el-pagination>
      </div>
    </div>
    <!-- 问答详情 -->
    <!-- <el-dialog
      title="问答详情"
      :visible.sync="centerDialogVisible"
      width="700px"
      center
    >
      <h2>{{ form.content }}</h2>
      <div v-html="form.dicusCent" class="img-style"></div>
    </el-dialog> -->

    <!-- 删除问题提示框 -->
    <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
      <div class="del-dialog-cnt" align="center">
        删除不可恢复，是否确定删除？
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="delVisible = false">取 消</el-button>
        <el-button type="primary" size="mini" @click="submitDelete"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 删除回答提示框 -->
    <!-- <el-dialog title="提示" :visible.sync="delVisibleAns" width="300px" center>
      <div class="del-dialog-cnt" align="center">
        删除不可恢复，是否确定删除？
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="delVisibleAns = false">取 消</el-button>
        <el-button type="primary" size="mini" @click="deleteRowAns"
          >确 定</el-button
        >
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "proandans-page",
  data() {
    return {
      tableData: [],
      tempData: [],
      multipleSelection: [],
      centerDialogVisible: false,
      select_word: "",
      delVisible: false,
      tIdIdx: "",
      pageSize: 5, // 页数
      currentPage: 1, // 当前页
      problemIDx: -1,
      answerIDx: -1,
      form: {
        tId: "",
        title: "",
        nickname: "",
        publishTime: "",
        likes: "",
        collectionTimes: "",
      },
    };
  },
  computed: {
    // 计算当前表格中的数据
    data() {
      return this.tableData.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
  },
  watch: {
    select_word: function () {
      if (this.select_word === "") {
        this.tableData = this.tempData;
      } else {
        this.tableData = [];
        for (let item of this.tempData) {
          let title = item.title;
          if (title.includes(this.select_word)) {
            this.tableData.push(item);
          }
        }
      }
    },
  },
  created() {
    this.getData();
  },
  methods: {
    submitCheck(tId, checkStatus) {
      let _this = this;
      if (checkStatus == false) {
        checkStatus = "0";
      } else {
        checkStatus = "1";
      }
      $.ajax({
        type: "get",
        data: { tId, checkStatus },
        url: "http://localhost:8080/forum/admin/checktopic",
        dataType: "json",
        success: function (response) {
          // console.log("hotlist", response);
          if (response === 200) {
            _this.$notify({
              title: "审核完成",
              type: "success",
            });
            _this.getData();
          }
        },
      });
    },
    submitDelete() {
      var _this = this;
      let tId = this.tIdIdx;
      $.ajax({
        type: "get",
        data: { tId },
        url: "http://localhost:8080/forum/admin/deletetopic",
        dataType: "json",
        success: function (response) {
          // console.log("hotlist", response);
          if (response === 200) {
            _this.$notify({
              title: "删除成功",
              type: "success",
            });
            _this.getData();
          }
          _this.delVisible = false;
        },
      });
    },
    // 获取批量要删除的列表
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 批量删除
    // delAll() {
    //   for (let item of this.multipleSelection) {
    //     this.handleDelete(item.userId);
    //     this.deleteRow(item.userId);
    //   }
    //   this.multipleSelection = [];
    // },
    handleDelete(tId) {
      this.delVisible = true;
      this.tIdIdx = tId;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getUrl(url) {
      //  return `${this.$store.state.HOST}/${url}`
      return `http://127.0.0.1:3007${url}`;
    },

    notify(title, type) {
      this.$notify({
        title: title,
        type: type,
      });
    },
    // 获取当前页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    // 获取帖子
    getData() {
      this.tableData = [];
      this.tempData = [];
      let _this = this;
      $.ajax({
        type: "get",
        url: "http://localhost:8080/forum/admin/topiclist",
        dataType: "json",
        success: function (response) {
          // console.log("nicelist", response);
          _this.tableData = response;
          _this.tableData.forEach((row) => {
            if (row.checkStatus === "1") {
              row.checkStatus = true;
            } else {
              row.checkStatus = false;
            }
          });
          _this.tempData = _this.tableData;
        },
      });
    },

    // // 确定删除问题
    // deleteRowPro() {
    //   let id = this.problemIDx;
    //   let params = { id };
    //   console.log(params);
    //   axios
    //     .post("api/deleteproblem", params)
    //     .then((res) => {
    //       console.log(res.data);
    //       if (res) {
    //         this.getData();
    //         this.notify("删除成功", "success");
    //       } else {
    //         this.notify("删除失败", "error");
    //       }
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //     });
    //   this.delVisiblePro = false;
    // },
    // // 确定删除回答
    // deleteRowAns() {
    //   let id = this.answerIDx;
    //   let params = { id };
    //   console.log(params);
    //   axios
    //     .post("api/deleteanswer", params)
    //     .then((res) => {
    //       console.log(res.data);
    //       if (res) {
    //         this.getData();
    //         this.notify("删除成功", "success");
    //       } else {
    //         this.notify("删除失败", "error");
    //       }
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //     });
    //   this.delVisibleAns = false;
    // },
  },
};
</script>

<style lang="less"scoped>
a {
  color: #0000ee;
}
.handle-box {
  margin-bottom: 20px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

h2 {
  margin-bottom: 10px;
}

/deep/ .img-style img {
  width: 600px;
}

.pagination {
  display: flex;
  justify-content: center;
}

.dinVideo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 75px;
  color: #fff;
}
</style>

